<template>
    <div class="page-header">
        <el-button @click="state.dialogFormVisible=true" type="primary">添加角色</el-button>
    </div>
    <div class="page-card">
        <el-table :data="state.roleList">
            <el-table-column prop="group_id" label="Id">
            </el-table-column>
            <el-table-column prop="name" label="角色名">
            </el-table-column>
            <el-table-column prop="create_time" :formatter="$utils.timeFormat" label="创建时间">
            </el-table-column>
            <el-table-column prop="" label="操作" width="160px" align="center">
                <template #default="scope">
                    <el-button @click="getUserRule(scope.row.group_id)" size="small">编辑</el-button>
                    <el-button type="danger" @click="roleDel(scope.row.group_id,scope.$index)" size="small">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加角色弹窗 -->
        <el-dialog title="添加角色" v-model="state.dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item label="角色名称">
                    <el-input v-model="state.form.name" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="state.dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" :loading="state.btnLoading" @click="roleAdd">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑角色弹窗 -->
        <el-dialog title="编辑权限" v-model="state.showEditDialog" width="80%">
            <el-tree ref="ruleTree" :check-strictly="true" :data="state.rulelList" @check-change="handleCheckChange"
                :default-expand-all="true" :props="state.treePros" show-checkbox node-key="id"></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="state.showEditDialog = false">取 消</el-button>
                <el-button type="primary" :loading="state.btnLoading" @click="roleRuleSave">确 定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { nextTick, onMounted, reactive, ref } from 'vue';
import http from "@/utils/request";
import { ElMessage, ElMessageBox } from 'element-plus';

const state = reactive({
    btnLoading: false,
    btnDisabled: false,
    form: {
        name: ""
    },
    treePros: {
        label: "title"
    },
    showEditDialog: false,
    dialogFormVisible: false,
    roleList: [],
    rulelList: [],
    userRuleIds: [],
    roleId: ""
})

let ruleTree = ref(null);
let form = ref(null);

onMounted(() => {
    getRoleList()
})

function handleCheckChange() {
    let Keys = ruleTree.value.getCheckedKeys()
    let halfKeys = ruleTree.value.getHalfCheckedKeys() //半选状态

    let allKeys = Keys.concat(halfKeys)

    state.userRuleIds = allKeys;
}

// 获取角色列表
function getRoleList() {
    http.get("/admin/user/roleList").then(res => {
        state.roleList = res.result;
    })
}

function roleAdd() {
    if (!state.form.name) {
        ElMessage.error('角色名不能为空');
        return;
    }

    state.btnLoading = true;
    state.btnDisabled = true;
    http.post("/admin/user/roleAdd", state.form).then(res => {
        if (res.code === 200) {
            form.value.resetFields();
            ElMessage.success(res.msg)
            state.dialogFormVisible = false;

            getRoleList();
        }

        state.btnLoading = false;
        state.btnDisabled = false;
    })
}

function roleDel(id, index) {
    ElMessageBox.confirm(
        '确认删除?',
        '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }
    ).then(() => {
        http.post("/admin/user/roleDel", {
            id: id
        }).then(res => {
            if (res.code == 200) {
                state.roleList.splice(index, 1);
                ElMessage.success('删除成功');
            }
        })
    })
}

function getUserRule(id) {
    state.roleId = id;
    http.get("/admin/user/roleRuleList", {
        id: id
    }).then(res => {
        state.rulelList = res.result.all_rule;
        state.userRuleIds = res.result.user_rule_ids;

        nextTick(() => {
            ruleTree.value.setCheckedKeys(res.result.user_rule_ids);
        })
    })
    state.showEditDialog = true;
}

function roleRuleSave() {
    http.post("/admin/user/ruleSave", {
        role_id: state.roleId,
        rule_ids: state.userRuleIds
    }).then(res => {
        if (res.code == 200) {
            ElMessage.success("保存成功");
            state.showEditDialog = false;
        }
    })
}
</script>
<style>

</style>